<template>
  <view class="contents">
    <u-navbar
      title="云上农夫"
      leftIconColor="#f8f8f8"
      :placeholder="true"
      bgColor="#f8f8f8"
    >
      <template #left>
        <navigator url="/pages/cart/index" open-type="switchTab">
          <image
            @click="goback"
            class="logo"
            src="/static/zuo1.png"
            style="width: 40rpx; height: 40rpx; margin-right: 20rpx"
          >
          </image>
        </navigator>
      </template>
      <template #right>
        <navigator url="/pages/cart/index" open-type="switchTab">
          <image
            class="logo"
            src="/static/start1.jpg"
            style="width: 40rpx; height: 40rpx; margin-right: 20rpx"
          >
          </image>
          <image
            class="logo"
            src="/static/fx.png"
            style="width: 40rpx; height: 40rpx; margin-right: 20rpx"
          >
          </image>
        </navigator>
      </template>
    </u-navbar>
    <view class="title">
      <text>团购</text>
    </view>
    <view class="">
      <view class="tabTwolist">
        <view
          class="tabTwoitem"
          v-for="(item, i) in groupbuying"
          :key="i"
          @click="detail"
        >
          <view class="tabTwoitem_left">
            <img :src="item.url" alt="" />
          </view>
          <view class="tabTwoitem_right">
            <view class="title">
              <text class="title_1">{{ item.title }}</text>
              <text class="title_2">{{ item.tag2 }}</text>
            </view>
            <view class="item_a">
              <text class="item_a1">{{ item.tag }}</text>
              <text class="item_a2">{{ item.time }}</text>
              <text class="item_a3">{{ item.num }}份</text>
            </view>
            <view class="item_a">
              <text class="item_a1">随时退 过期自动退 免预约</text>
            </view>
            <view class="price">
              <text class="price_1">￥{{ item.price }}</text>
              <view class="price_2">
                <img src="../../static/gwc.png" alt="" class="gwc" />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      groupbuying: [
        {
          id: 1,
          url: "https://img0.baidu.com/it/u=1512883555,827303141&fm=253&fmt=auto&app=138&f=JPEG",
          title: "[两大一小]亲子采摘",
          tag: "草莓园",
          tag2: "半年售",
          num: "650",
          price: "130",
          time: "周一到周日",
          title1: "新农人农场",
        },
        {
          id: 2,
          url: "https://img0.baidu.com/it/u=1512883555,827303141&fm=253&fmt=auto&app=138&f=JPEG",
          title: "[两大一小]亲子采摘",
          tag: "蔬菜园",
          tag2: "半年售",
          num: "600",
          price: "110",
          time: "周一到周日",
          title1: "新农人农场",
        },
        {
          id: 3,
          url: "https://img0.baidu.com/it/u=1512883555,827303141&fm=253&fmt=auto&app=138&f=JPEG",
          title: "[两大一小]亲子采摘",
          tag: "蔬菜园",
          tag2: "半年售",
          num: "600",
          price: "110",
          time: "周一到周日",
          title1: "新农人农场",
        },
      ],
    };
  },
  methods: {
    detail() {
      uni.navigateTo({
        url: "/packageB/productdetails/grouppurchasedetails",
      });
    },
    goback() {
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}
.contents {
  font-family: "Poppins";
}
page {
  padding: 0rpx 20rpx;
  background-color: #f9f9f9;
}

.title {
  font-size: 32rpx;
  font-weight: 600;
  padding: 10rpx;
}

// 团购
.tabTwoitem {
  background-color: #fff;
  border-radius: 20rpx;
  display: flex;
  // height: 180rpx;
  padding: 15rpx;
  margin-bottom: 10rpx;

  .tabTwoitem_left {
    width: 200rpx;
    margin-right: 10rpx;
    border-radius: 10rpx;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .tabTwoitem_right {
    flex: 1;

    .title {
      display: flex;
      font-size: 28rpx;
      color: #3d3d3d;
      padding-right: 10rpx;

      .title_1 {
        flex: 1;
      }
    }

    .title1 {
      font-size: 28rpx;
      color: #3d3d3d;
    }

    .item_a {
      display: flex;
      align-items: center;
      padding-right: 10rpx;

      .item_a1 {
        font-size: 22rpx;
        color: #adadad;
        display: inline-block;
        margin-right: 20rpx;
      }

      .item_a2 {
        font-size: 22rpx;
        color: #adadad;
        flex: 1;
      }

      .item_a3 {
        font-size: 22rpx;
        color: #8d8683;
      }
    }

    .price {
      display: flex;
      align-items: center;
      padding-right: 10rpx;

      .price_1 {
        font-size: 28rpx;
        color: #3d3d3d;
        flex: 1;
      }

      .price_2 {
        .gwc {
          width: 50rpx;
          height: 50rpx;
        }
      }
    }
  }
}
</style>